<template>
  <CustomForm
    :form-data="formData"
    :rules="rules"
    :schemas="schemas"
    ref="formRef"
  />
</template>

<script lang="ts" setup>
import { FormRules } from 'element-plus'
import CustomForm from '../form/CustomForm.vue'
import { reactive, toRaw, useTemplateRef } from 'vue'
import { IFormSchemas } from '@/type/table'
import { IApproveRequest } from '@/api/application/coordination'

interface IFormData {
  processOpinion: string
}

const formRef = useTemplateRef<InstanceType<typeof CustomForm>>('formRef')
const formData = reactive<IFormData>({
  processOpinion: '',
})

const rules = reactive<FormRules<IFormData>>({
  processOpinion: [
    { required: true, message: '请输入审批意见', trigger: 'blur' },
  ],
})

const schemas: IFormSchemas[] = [
  {
    label: '审批意见',
    prop: 'processOpinion',
    type: 'input',
    componentProps: {
      type: 'textarea',
      maxlength: 200,
      clearable: true,
      autosize: { minRows: 4, maxRows: 6 },
      'show-word-limit': true,
    },
  },
]

const validate = async (callback?: (approveInfo: IApproveRequest) => void) => {
  await formRef?.value?.validate(async (valid) => {
    if (valid) {
      await callback?.(toRaw(formData))
    }
  })
}

const reset = () => {
  formRef.value?.reset()
}

defineExpose({
  validate,
  reset,
})
</script>
